﻿@{
    Layout = "~/Views/Shared/_Customer.cshtml";
}
<script src="~/Content/front-end/js/jquery-1.8.3.min.js"></script>
<script src="~/Content/front-end/js/jquery.elevatezoom.js"></script>

<div id="fb-root"></div>
@*<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1498647547026177";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>*@

@if (ViewBag.Result)
{
    EC18_ESHOP.Models.PRODUCT product = ViewBag.Product;
    <script type="text/javascript">
        $.post('/Cart/addToRecentlyView/', { productId: '@product.Product_ID' }, function () {
        });
    </script>
    <div class="productDetail">
        <div class="container">
            <div class="row">
                <!-- start images of product -->
                <div class="col-md-5">
                    <div class="thumbnail">

                        @*<div class="row">*@
                        <div id="mainImg" class="zoom-small-image">
                            <img id="img_01" src="~/Images/Product/@product.ProductId/01-s.jpg" data-zoom-image="/Images/Product/@product.ProductId/01-b.jpg" />
                            <div class="caption text-center col-md-12">
                                <div id="gallery_01">
                                    @{int k = 1;
                                      foreach (string item in ViewBag.ListUrlImages)
                                      {
                                        <a class="smImg" href="#" data-image="@item" data-zoom-image="@item.Replace("-s", "-b")" >
                                            <img id="@("img_" + k.ToString())" src="@item" class="img-rounded  col-md-5 smImg">
                                        </a>
                                          k++;
                                      }
                                    }
                                </div>
                            </div>

                            <style>
                                #img_01 {
                                    position: relative !important;
                                    max-width: 400px !important;
                                    height: auto !important;
                                }

                                #mainImg > .zoomWrapper {
                                    height: auto !important;
                                    width: auto !important;
                                    text-align: center !important;
                                }

                                #mainImg > .caption {
                                    padding: 10px 0;
                                }

                                    #mainImg > .caption img {
                                        padding: 2px;
                                    }
                            </style>

                            <script type="text/javascript">
                                $("#img_01").elevateZoom({
                                    gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active',
                                    imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
                                });

                                //pass the images to Fancybox
                                $("#img_3").bind("click", function (e) {
                                    var ez = $('#img_3').data('elevateZoom');
                                    $.fancybox(ez.getGalleryList());
                                    return false;
                                });
                            </script>

                            <div class="clearfix"></div>
                        </div>

                    </div>
                </div>
                <!-- end images of product -->

                <!-- start detail of product-->
                <div class="col-md-7">
                    <br />
                    <h2><b>@Html.DisplayFor(modelItem => product.ProductName)</b></h2>
                    sản xuất bởi @Html.DisplayFor(modelItem => product.MANUFACTURER.ManufacturerName)
                    <br />
                    <br />
                    <div>
                        <ul>
                            @{List<EC18_ESHOP.Models.PRODUCT_PROPERTIES> arrProperty = product.PRODUCT_PROPERTIES.ToList();
                              if (arrProperty.Count != 0)
                              {
                                  foreach (EC18_ESHOP.Models.PRODUCT_PROPERTIES item in arrProperty)
                                  {
                                      if (item.IsImportant)
                                      {
                                <li>
                                    @item.PROPERTY.PropertyName : @Html.Raw(HttpUtility.HtmlDecode(item.Value))
                                </li>
                                      }
                                  }
                              }
                            }
                        </ul>
                    </div>
                    <h2><b>@Html.DisplayFor(modelItem => product.ProductPrice) vnđ</b></h2>
                    <a href="~/Cart/addToCart/?ProductId=@product.Product_ID">
                        <button type="button" class="btn btn-success">Thêm vào giỏ hàng</button>
                    </a>
                    <a href="~/Cart/addToWishList/?ProductId=@product.Product_ID">
                        <button type="button" class="btn btn-success">♥ Thêm vào yêu thích</button>
                    </a>
                    <br />
                    <br />
                    <div class="fb-like" data-href="http://www.eshopec18.somee.com/ProductDetail/Index/@product.Product_ID" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                </div>
                <!-- end detail of product-->
            </div>
        </div>

        <!-- start tab introduce - property - review-->
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <ul class="nav nav-tabs" id="tabIntroduce">
                        <li class="active"><a href="#home" data-toggle="tab">Giới thiệu sản phẩm</a></li>
                        <li><a href="#profile" data-toggle="tab">Thông số sản phẩm</a></li>
                        <li><a href="#messages" data-toggle="tab">Ý kiến đánh giá</a></li>
                    </ul>

                    <div class="tab-content">
                        <!-- start introduce -->
                        <div class="tab-pane active" id="home">
                            <br />
                            <h1>Giới thiệu sản phẩm @product.ProductName</h1>
                            <br />
                            @Html.Raw(HttpUtility.HtmlDecode(product.Description));
                        </div>
                        <!-- end introduce -->

                        <!-- start property detail -->
                        <div class="tab-pane" id="profile">
                            <br />
                            <h1>Thông số sản phẩm @product.ProductName</h1>
                            <br />
                            <table class="table table-hover" style="background-color: white">
                                <thead>
                                    <tr>
                                        <th>Thông số</th>
                                        <th>Giá trị</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (EC18_ESHOP.Models.PRODUCT_PROPERTIES item in ViewBag.ListProperty)
                                    {
                                        <tr>
                                            <td>@Html.DisplayFor(modelItem => item.PROPERTY.PropertyName)</td>
                                            <td>@Html.Raw(HttpUtility.HtmlDecode(item.Value))</td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                        <!-- end property detail -->

                        <!-- start review and rating -->
                        <div class="tab-pane" id="messages">

                            <br />
                            <h1>Đánh giá về sản phẩm @product.ProductName</h1>
                            <div class="col-md-12" style="text-align: right">
                                <a class="btn btn-success" id="showSetCmt">Gửi ý kiến của bạn</a>
                            </div>
                            <div class="text-center">

                                <div class="resultCmt" style="display: none">
                                    <label>Đánh giá của bạn đã được ghi nhận. Xin cảm ơn bạn.</label>
                                </div>
                                <div id="setCmt" style="display: none">
                                    <form id="frmRating" class="form-horizontal" role="form" action="#" method="post">
                                        <h3>Bạn đánh giá sản phẩm này thế nào?</h3>
                                        <div id="rating">
                                            @{for (int i = 1; i < 6; i++)
                                              {
                                                <img class="ratingStar" src="~/Images/Lowrating.png" id="@("star" + i.ToString())"  />
                                              }
                                            }
                                        </div>
                                        <br />

                                        <div class="form-group">
                                            <div class="col-md-10 col-md-push-2">
                                                <input type="text" class="form-control" id="inputTitle" placeholder="Tiêu đề - nhiều nhất 100 kí tự">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-md-10 col-md-push-2">
                                                <textarea id="inputMess" rows="7" placeholder="Nội dung đánh giá sản phẩm" style="width: 100%; height: 100%"></textarea>
                                            </div>
                                            <div class="col-md-10 col-md-push-2">
                                                <label class="maxLength" style="text-align: right">Nhiều nhất là 500 kí tự</label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-default">Gửi đánh giá</button>
                                    </form>
                                </div>

                            </div>
                            <br />
                            <div id="showCmt">
                                <hr />
                                @{List<EC18_ESHOP.Models.COMMENT> arrComment = product.COMMENT.ToList();
                                  if (arrComment.Count != 0)
                                  {
                                    <div class="col-md-12">
                                        <br />
                                        <table class="table" style="background-color: white" border="0">
                                            <tbody style="border: none">
                                                <tr>
                                                    <td style="width: 250px; padding: 0 0 0 0">
                                                        @{for (int i = 5; i > 0; i--)
                                                          {
                                                            <img class="ratingStar" src="~/Images/Favourites.png" />
                                                          }
                                                        }
                                                    </td>
                                                    <td>
                                                        <h3>@product.COMMENT.Where(p => p.Rating == 5).ToList().Count()</h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 250px; padding: 0 0 0 0">
                                                        @{for (int i = 1; i < 5; i++)
                                                          {
                                                            <img class="ratingStar" src="~/Images/Favourites.png" />
                                                          }
                                                            <img class="ratingStar" src="~/Images/Lowrating.png" />
                                                        }
                                                    </td>
                                                    <td>
                                                        <h3>@product.COMMENT.Where(p => p.Rating == 4).ToList().Count()</h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 250px; padding: 0 0 0 0">
                                                        @{for (int i = 1; i < 4; i++)
                                                          {
                                                            <img class="ratingStar" src="~/Images/Favourites.png" />
                                                          }
                                                            <img class="ratingStar" src="~/Images/Lowrating.png" />
                                                            <img class="ratingStar" src="~/Images/Lowrating.png" />
                                                        }
                                                    </td>
                                                    <td>
                                                        <h3>@product.COMMENT.Where(p => p.Rating == 3).ToList().Count()</h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 250px; padding: 0 0 0 0">
                                                        <img class="ratingStar" src="~/Images/Favourites.png" />
                                                        <img class="ratingStar" src="~/Images/Favourites.png" />
                                                        @{for (int i = 1; i < 4; i++)
                                                          {
                                                            <img class="ratingStar" src="~/Images/Lowrating.png" />
                                                          }
                                                        }
                                                    </td>
                                                    <td>
                                                        <h3>@product.COMMENT.Where(p => p.Rating == 2).ToList().Count()</h3>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width: 250px; padding: 0 0 0 0">
                                                        <img class="ratingStar" src="~/Images/Favourites.png" />
                                                        @{for (int i = 1; i < 5; i++)
                                                          {
                                                            <img class="ratingStar" src="~/Images/Lowrating.png" />
                                                          }
                                                        }
                                                    </td>
                                                    <td>
                                                        <h3>@product.COMMENT.Where(p => p.Rating == 1).ToList().Count()</h3>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    </div>
                                    <div class="col-md-12">

                                        <hr />
                                        @foreach (EC18_ESHOP.Models.COMMENT item in arrComment)
                                        {
                                            if (item.CmtTitle != null)
                                            {
                                            <h4 class="cmtTitle">
                                                @item.CmtTitle
                                            </h4>
                                            <div class="cmtUser">@item.UserProfile.UserName
                                                &nbsp | &nbsp
                                                @item.CmtTime
                                            </div>
                                            <div class="cmtRating">
                                                Đánh giá: 
                                                @{
                                                switch (item.Rating)
                                                {
                                                    case 1:
                                                    <img src="~/Images/1star.JPG" />
                                                        break;
                                                    case 2:
                                                    <img src="~/Images/2stars.JPG" />
                                                        break;
                                                    case 3:
                                                    <img src="~/Images/3stars.JPG" />
                                                        break;
                                                    case 4:
                                                    <img src="~/Images/4stars.JPG" />
                                                        break;
                                                    case 5:
                                                    <img src="~/Images/5stars.JPG" />
                                                        break;
                                                }
                                                }
                                            </div>
                                            <div class="cmtMessage">
                                                @item.CmtMess
                                            </div>
                                            }
                                            <hr />
                                        }
                                    </div>
                                                  
                                  }
                                  else
                                  {
                                    <h3>Không có đánh giá nào cho sản phẩm này</h3>
                                  }
                                }
                            </div>
                        </div>
                        <!-- end review and rating -->

                    </div>

                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
        <!-- end tab introduce - property - review-->
    </div>
    <script type="text/javascript">
        $('#showSetCmt').click(function () {
            $('#setCmt').show();
        });

        var total = 0;
        $('#star1').click(function () {
            total = 1;
            showRating();
        });
        $('#star2').click(function () {
            total = 2;
            showRating();
        });
        $('#star3').click(function () {
            total = 3;
            showRating();
        });
        $('#star4').click(function () {
            total = 4;
            showRating();
        });
        $('#star5').click(function () {
            total = 5;
            showRating();
        });

        $('#star1').mouseover(function () {
            $('#star1').attr("src", "/Images/Favourites.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
        });
        $('#star2').mouseover(function () {
            $('#star1').attr("src", "/Images/Favourites.png");
            $('#star2').attr("src", "/Images/Favourites.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
        });
        $('#star3').mouseover(function () {
            $('#star1').attr("src", "/Images/Favourites.png");
            $('#star2').attr("src", "/Images/Favourites.png");
            $('#star3').attr("src", "/Images/Favourites.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
        });
        $('#star4').mouseover(function () {
            $('#star1').attr("src", "/Images/Favourites.png");
            $('#star2').attr("src", "/Images/Favourites.png");
            $('#star3').attr("src", "/Images/Favourites.png");
            $('#star4').attr("src", "/Images/Favourites.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
        });
        $('#star5').mouseover(function () {
            $('#star1').attr("src", "/Images/Favourites.png");
            $('#star2').attr("src", "/Images/Favourites.png");
            $('#star3').attr("src", "/Images/Favourites.png");
            $('#star4').attr("src", "/Images/Favourites.png");
            $('#star5').attr("src", "/Images/Favourites.png");
        });

        $('#star1').mouseout(function () {
            $('#star1').attr("src", "/Images/Lowrating.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
            showRating(1);

        });
        $('#star2').mouseout(function () {
            $('#star1').attr("src", "/Images/Lowrating.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
            showRating();
        });
        $('#star3').mouseout(function () {
            $('#star1').attr("src", "/Images/Lowrating.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
            showRating();
        });
        $('#star4').mouseout(function () {
            $('#star1').attr("src", "/Images/Lowrating.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
            showRating();
        });
        $('#star5').mouseout(function () {
            $('#star1').attr("src", "/Images/Lowrating.png");
            $('#star2').attr("src", "/Images/Lowrating.png");
            $('#star3').attr("src", "/Images/Lowrating.png");
            $('#star4').attr("src", "/Images/Lowrating.png");
            $('#star5').attr("src", "/Images/Lowrating.png");
            showRating();
        });

        function showRating() {
            if (total == 1) {
                $('#star1').attr("src", "/Images/Favourites.png");
                $('#star2').attr("src", "/Images/Lowrating.png");
                $('#star3').attr("src", "/Images/Lowrating.png");
                $('#star4').attr("src", "/Images/Lowrating.png");
                $('#star5').attr("src", "/Images/Lowrating.png");
            }
            else if (total == 2) {
                $('#star1').attr("src", "/Images/Favourites.png");
                $('#star2').attr("src", "/Images/Favourites.png");
                $('#star3').attr("src", "/Images/Lowrating.png");
                $('#star4').attr("src", "/Images/Lowrating.png");
                $('#star5').attr("src", "/Images/Lowrating.png");
            }
            else if (total == 3) {
                $('#star1').attr("src", "/Images/Favourites.png");
                $('#star2').attr("src", "/Images/Favourites.png");
                $('#star3').attr("src", "/Images/Favourites.png");
                $('#star4').attr("src", "/Images/Lowrating.png");
                $('#star5').attr("src", "/Images/Lowrating.png");
            }
            else if (total == 4) {
                $('#star1').attr("src", "/Images/Favourites.png");
                $('#star2').attr("src", "/Images/Favourites.png");
                $('#star3').attr("src", "/Images/Favourites.png");
                $('#star4').attr("src", "/Images/Favourites.png");
                $('#star5').attr("src", "/Images/Lowrating.png");
            }
            else if (total == 5) {
                $('#star1').attr("src", "/Images/Favourites.png");
                $('#star2').attr("src", "/Images/Favourites.png");
                $('#star3').attr("src", "/Images/Favourites.png");
                $('#star4').attr("src", "/Images/Favourites.png");
                $('#star5').attr("src", "/Images/Favourites.png");
            }
        }

        $('#frmRating').submit(function (e) {
            e.preventDefault();
            if (total == 0)
                alert("Bạn chưa cho điểm đánh giá");
            else {
                var dataRating = {
                    cmtTitle: $('#inputTitle').val(),
                    cmtMessage: $('#inputMess').val(),
                    rating: total,
                    productId: "@product.Product_ID"
                };
                $.post('/ProductDetail/rating', dataRating, function (data) {
                    if (data.status == true) {
                        location.reload();
                        //$('#tabIntroduce a:last').tab('show')
                    }
                    else {
                        alert("ô nô");
                    }
                });
            }
        });
    </script>
}
else
{
    <div>
        <h1>ma sp ko hop le</h1>
    </div>
}

